<template>
  <!-- 辖区管理 -->
  <div class="area-index">
    <a-row class="aRow-wrapper" :gutter="12">
      <a-col class="tree-wrapper" :span="4">
        <left-tree @onSelect="onSelectTree"></left-tree>
      </a-col>
      <a-col class="listContent-wrapper" :span="20">
        <div class="l-w_content">
          <top-title :updateTime="true" :content="content"></top-title>

          <div class="l-w_c_content">
            <div class="search-group">
              <div class="input-wrap">
                <div class="label">所属行业:</div>
                <div class="input-item">
                  <el-cascader
                    ref="cascaderRef"
                    clearable
                    placeholder="请选择所属行业"
                    class="cascader tradeCascader"
                    v-model="industryCas"
                    :show-all-levels="false"
                    :options="industryListTree"
                    collapse-tags
                    :props="{ label: 'informationName', value: 'id', multiple: true }"
                    @change="handleCasChange"
                  ></el-cascader>
                </div>
              </div>

              <div class="input-wrap">
                <div class="label">单位名称：</div>
                <div class="input-item">
                  <a-input :maxLength="30" v-model="queryParam.companyName" placeholder="请填写企业名称" />
                </div>
              </div>

              <div class="input-wrap">
                <div class="label">人员姓名：</div>
                <div class="input-item">
                  <a-input :maxLength="30" v-model="queryParam.personName" placeholder="请填写人员姓名" />
                </div>
              </div>

              <div class="input-wrap">
                <div class="label">身份证号：</div>
                <div class="input-item">
                  <a-input :maxLength="30" v-model="queryParam.idCard" placeholder="请填写身份证号" />
                </div>
              </div>

              <div class="input-wrap">
                <div class="label">联系方式：</div>
                <div class="input-item">
                  <a-input :maxLength="30" v-model="queryParam.mobile" placeholder="请填写联系方式" />
                </div>
              </div>

              <div class="input-wrap">
                <div class="label">人员标签:</div>
                <div class="input-item">
                  <a-select ref="select" allowClear v-model="queryParam.tag" placeholder="请选择人员标签">
                    <a-select-option v-for="(item, index) in tagList" :key="index" :value="item.value">
                      {{ item.text }}
                    </a-select-option>
                  </a-select>
                </div>
              </div>

              <div class="input-wrap">
                <div class="label">采集时间 :</div>
                <div class="time-item">
                  <start-end-time
                    :times="times"
                    :showTime="{ format: 'HH:mm:ss' }"
                    format="YYYY-MM-DD HH:mm:ss"
                    @timeChange="timeChange"
                    :resetTime="resetTime"
                  ></start-end-time>
                </div>
              </div>

              <div class="btn-wrap">
                <a-button class="searchBtn" @click="searchQuery()" type="primary"> 搜索 </a-button>
                <a-button class="resetBtn" @click="resetHandle()" type="primary"> 重置 </a-button>
              </div>
            </div>

            <div>
              <a-table
                rowKey="id"
                class="tableList"
                :columns="columns"
                :dataSource="dataSource"
                :pagination="ipagination"
                @change="handleTableChange"
              >
                <template #tagNameList="records">
                  <a-tooltip placement="top">
                    <template #title>
                      <span>{{ records.tagNameList.join(',') }}</span>
                    </template>
                    <span>{{ records.tagNameList.join(',') }}</span>
                  </a-tooltip>
                </template>
                <template v-slot:action="records">
                  <span class="operation deatil-color" @click="editHandle(records)" v-has="'jurisdiction:detail'"
                    >标记
                  </span>
                  <span class="operation deatil-color" @click="detailsHandle(records)" v-has="'jurisdiction:detail'"
                    >详情
                  </span>
                </template>
              </a-table>
            </div>
          </div>
        </div>
      </a-col>
    </a-row>

    <edit-modal ref="editModal" @refresh="searchQuery()"></edit-modal>
    <details-modal ref="detailsModal"></details-modal>
  </div>
</template>

<script>
import editModal from './modules/editModal'
import detailsModal from './modules/detailsModal'
import startEndTime from '@/components/startEndTime'
import leftTree from '@/components/leftTree'
import topTitle from '@/components/topTitle'
import { informationPage } from '@/api/industry'
import { Cascader } from 'element-ui'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { comMethods } from '@/mixins/comMethods'
import { mapState } from 'vuex'
import moment from 'moment'

export default {
  name: '',
  components: { editModal, detailsModal, startEndTime, leftTree, topTitle, 'el-cascader': Cascader },
  mixins: [JeecgListMixin, comMethods],
  data() {
    return {
      cascaderRef: null,
      url: {
        list: '/hotel/work_person/page?status=1',
        tree: true,
      },
      content: [['从业人员']],
      publicVisible: false,
      resetTime: false,
      industryCas: [],
      industryListTree: [],
      columns: [
        {
          title: '序号',
          align: 'center',
          width: 100,
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        {
          title: '所属行业',
          dataIndex: 'industryInformationName',
          ellipsis: true,
          align: 'center',
          customRender: (t) => {
            return (
              <a-tooltip placement="top">
                <template slot="title">
                  <span>{t}</span>
                </template>
                <div class="ant-table-row-cell-ellipsis">{t}</div>
              </a-tooltip>
            )
          },
        },
        {
          title: '单位名称',
          dataIndex: 'companyMessageName',
          ellipsis: true,
          align: 'center',
          customRender: (t) => {
            return (
              <a-tooltip placement="top">
                <template slot="title">
                  <span>{t}</span>
                </template>
                <div class="ant-table-row-cell-ellipsis">{t}</div>
              </a-tooltip>
            )
          },
        },
        {
          title: '人员姓名',
          align: 'center',
          dataIndex: 'personName',
          ellipsis: true,
          customRender: (t) => {
            return (
              <a-tooltip placement="top">
                <template slot="title">
                  <span>{t}</span>
                </template>
                <div class="ant-table-row-cell-ellipsis">{t}</div>
              </a-tooltip>
            )
          },
        },
        {
          title: '身份证号',
          align: 'center',
          dataIndex: 'idCard',
          ellipsis: true,
          customRender: (t) => {
            return (
              <a-tooltip placement="top">
                <template slot="title">
                  <span>{t}</span>
                </template>
                <div class="ant-table-row-cell-ellipsis">{t}</div>
              </a-tooltip>
            )
          },
        },
        {
          title: '联系方式',
          dataIndex: 'mobile',
          align: 'center',
          ellipsis: true,
          customRender: (t) => {
            return (
              <a-tooltip placement="top">
                <template slot="title">
                  <span>{t}</span>
                </template>
                <div class="ant-table-row-cell-ellipsis">{t}</div>
              </a-tooltip>
            )
          },
        },
        {
          title: '职位名称',
          align: 'center',
          dataIndex: 'position_dictText',
          ellipsis: true,
          customRender: (t) => {
            return (
              <a-tooltip placement="top">
                <template slot="title">
                  <span>{t}</span>
                </template>
                <div class="ant-table-row-cell-ellipsis">{t}</div>
              </a-tooltip>
            )
          },
        },
        {
          title: '人员标签',
          align: 'center',
          scopedSlots: { customRender: 'tagNameList' },
          ellipsis: true,
        },
        {
          title: '采集时间',
          align: 'center',
          dataIndex: 'createTime',
          width: 180,
          ellipsis: true,
          customRender: (t) => {
            return (
              <a-tooltip placement="top">
                <template slot="title">
                  <span>{t}</span>
                </template>
                <div class="ant-table-row-cell-ellipsis">{t}</div>
              </a-tooltip>
            )
          },
        },
        {
          title: '操作',
          align: 'center',
          scopedSlots: { customRender: 'action' },
        },
      ],
    }
  },
  computed: {
    ...mapState({
      isPoliceAgencyId: (state) => state.user.isPoliceAgencyId,
    }),
  },
  watch: {
    isPoliceAgencyId(v) {
      this.queryParam.policeAgencyId = v.id ? v.id : ''
    },
  },
  activated() {
    if (this.$route.query && this.$route.query.constructor === Object) {
      let params = this.$route.query
      this.queryParam = {
        ...params, // 合并对象
      }
      this.searchQuery()
    }
  },
  mounted() {
    if (this.$route.query && this.$route.query.constructor === Object) {
      let params = this.$route.query
      this.queryParam = {
        ...params, // 合并对象
      }
      this.searchQuery()
    }

    this.industryCas = []
    this.getDictCas()
  },
  methods: {
    async getDictCas() {
      let { result } = await informationPage()
      this.industryListTree = this.deleteChildren(result)
    },
    deleteChildren(arr) {
      let childs = arr
      for (let i = childs.length; i--; i > 0) {
        if (childs[i].children) {
          if (childs[i].children.length) {
            this.deleteChildren(childs[i].children)
          } else {
            delete childs[i].children
          }
        }
      }
      return arr
    },
    handleCasChange(e) {
      this.queryParam.industryInformationId = this.$refs.cascaderRef
        .getCheckedNodes()
        .map((item) => {
          return item.value
        })
        .join(',')
    },
    onSelectTree(selectedKeys, info) {
      this.queryParam.policeAgencyId = selectedKeys.length ? selectedKeys[0] : ''
      this.searchQuery()
    },
    searchQuery() {
      this.loadData(1)
      this.resetTime = false
    },
    resetHandle() {
      this.resetTime = true
      this.industryCas = []
      this.queryParam.industryInformationId = ''
      this.searchReset()
    },
    timeChange(v, index) {
      if (index == 1) {
        this.queryParam.startTime = this.$moment(v).valueOf()
        if (v == null) {
          this.queryParam.startTime = null
        }
      } else {
        this.queryParam.endTime = this.$moment(v).valueOf()
        if (v == null) {
          this.queryParam.endTime = null
        }
      }
    },
    editHandle(records) {
      this.$refs.editModal.show(records)
    },
    detailsHandle(records) {
      this.$refs.detailsModal.show(records)
    },
  },
}
</script>
<style lang="less" scoped>
.area-index {
  width: 100%;
  height: 100%;
  .pageInfo {
    width: 100%;
    height: 100%;
  }
}
</style>
